<template>
  <div class="dasboard_body" style="padding:8px" ref="portaletDiv">
    <div>
      <a-row type="flex" :gutter="[16, 16]">
        <a-col :span="6" :order="1">
          <a-card :bordered="false">
            <div class="top_card">
              <a-statistic title="今日销售单数" :value="saleCount"  style="" valueStyle="color:#6a7890;">
<!--                <template #suffix>
                  <a-tag color="#ea331a" class="red_tag"> <a-icon type="arrow-up" />+15%</a-tag>
                </template>-->
              </a-statistic>
              <a-icon class="big_icon" type="info-circle" />
            </div>
          </a-card>
        </a-col>
        <a-col :span="6" :order="2">
          <a-card :bordered="false">
            <div class="top_card">
              <a-statistic title="今日销售单金额" :value="saleAmount" :precision="2" style="" valueStyle="color:#6a7890;">
<!--                <template #suffix>
                  <a-tag color="#ea331a" class="red_tag"> <a-icon type="arrow-up" />+15%</a-tag>
                </template>-->
              </a-statistic>
              <a-icon class="big_icon" type="pay-circle" />
            </div>
          </a-card>
        </a-col>
        <a-col :span="6" :order="3">
          <a-card :bordered="false">
            <div class="top_card">
              <a-statistic title="今日生产数" :value="productCount" style="" valueStyle="color:#6a7890;">
<!--                <template #suffix>
                  <a-tag color="#ea331a" class="red_tag"> <a-icon type="arrow-up" />+15%</a-tag>
                </template>-->
              </a-statistic>
              <a-icon class="big_icon" type="info-circle" />
            </div>
          </a-card>
        </a-col>
        <a-col :span="6" :order="4">
          <a-card :bordered="false">
            <div class="top_card">
              <a-statistic title="今日完工数" :value="completeCount"  style="" valueStyle="color:#6a7890;">
<!--                <template #suffix>
                  <a-tag color="#ea331a" class="red_tag"> <a-icon type="arrow-up" />+15%</a-tag>
                </template>-->
              </a-statistic>
              <a-icon class="big_icon" type="info-circle" />
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-row type="flex" :gutter="[16, 16]">
        <a-col :span="6" :order="1">
          <a-card :bordered="false">
            <div class="top_card">
              <a-statistic title="今日派单数" :value="dispatchCount"  style="" valueStyle="color:#6a7890;">
<!--                <template #suffix>
                  <a-tag color="#ea331a" class="red_tag"> <a-icon type="arrow-up" />+15%</a-tag>
                </template>-->
              </a-statistic>
              <a-icon class="big_icon" type="info-circle" />
            </div>
          </a-card>
        </a-col>
        <a-col :span="6" :order="2">
          <a-card :bordered="false">
            <div class="top_card">
              <a-statistic title="今日安装数" :value="installerCount" style="" valueStyle="color:#6a7890;">
<!--                <template #suffix>
                  <a-tag color="#ea331a" class="red_tag"> <a-icon type="arrow-up" />+15%</a-tag>
                </template>-->
              </a-statistic>
              <a-icon class="big_icon" type="info-circle" />
            </div>
          </a-card>
        </a-col>
        <a-col :span="6" :order="3">
          <a-card :bordered="false">
            <div class="top_card">
              <a-statistic title="今日测量单" :value="measureCount" style="" valueStyle="color:#6a7890;">
<!--                <template #suffix>
                  <a-tag color="#ea331a" class="red_tag"> <a-icon type="arrow-up" />+15%</a-tag>
                </template>-->
              </a-statistic>
              <a-icon class="big_icon" type="info-circle" />
            </div>
          </a-card>
        </a-col>
        <a-col :span="6" :order="4">
          <a-card :bordered="false">
            <div class="top_card">
              <a-statistic title="今日收款金额" :value="incomeAmount" :precision="2" style="" valueStyle="color:#6a7890;">
<!--                <template #suffix>
                  <a-tag color="#ea331a" class="red_tag"> <a-icon type="arrow-up" />+15%</a-tag>
                </template>-->
              </a-statistic>
              <a-icon class="big_icon" type="pay-circle" />
            </div>
          </a-card>
        </a-col>
      </a-row>
      <a-row type="flex" :gutter="[16, 16]" style="margin-top:8px">
        <a-col :span="24" :order="1">
          <a-card class="chart_card" :bordered="false">
            <line-radar :month-days='monthDays' :this-month-data='thisMonthData' :last-month-data='lastMonthData'></line-radar>
          </a-card>
        </a-col>
      </a-row>
      <a-row type="flex" :gutter="[16, 16]" style="margin-top:8px">
        <a-col :span="6" :order="1">
          <a-card :bordered="false" class="chart_card money">
            <div>
              <h4>月收款</h4>
            </div>
            <a-row type="flex" :gutter="[16, 16]" style="margin-top:8px">
              <a-col :span="24" :order="1"><h1>￥{{monthSaleOrderAmount}}</h1></a-col>
            </a-row>
            <div class="money_card">
             <p>上月增长</p>
              <span>￥{{ inc2MonthSaleOrderAmount }}</span>
            </div>
            <div class="money_card" style="border:0;">
              <p>当月增长</p>
              <span>￥{{incMonthSaleOrderAmount}}</span>
            </div>
            <div class="tag_box">
              <a-tag color="#ea331a" :class="incMonthSaleOrderAmountRatio>=0?'red_tag':'green_tag'">
                {{incMonthSaleOrderAmountRatio>=0?('+'+incMonthSaleOrderAmountRatio):incMonthSaleOrderAmountRatio}}%
              </a-tag>
            </div>
          </a-card>
        </a-col>
        <a-col :span="18" :order="1">
          <a-card class="chart_card" :bordered="false">
            <histogramChart :month-list='monthList' :month-sale-order-data='monthSaleOrderData'></histogramChart>
          </a-card>
        </a-col>
<!--        <a-col :span="6" :order="1">
          <a-card :bordered="false" class="chart_card">
            <div style="position: relative;" >
              <pieChart></pieChart>
              <div class="pie_center"></div>
            </div>
          </a-card>
        </a-col>-->
      </a-row>
    </div>
  </div>
</template>
<script>
import lineRadar from './line-chart'
import histogramChart from './histogram-chart'
import dashboardChart from './dashboard-chart'
import scatterChart from './scatter-chart'
import pieChart from './pie-chart'
import { getIndexData } from '@/api/biz/index'
export default {
  name: 'Config',
  components: {
    lineRadar,
    histogramChart,
    dashboardChart,
    scatterChart,
    pieChart
  },
  data () {
    return {
      saleCount:0,
      saleAmount:0,
      productCount:0,
      completeCount:0,
      dispatchCount:0,
      installerCount:0,
      measureCount:0,
      incomeAmount:0,
      monthDays:[],
      thisMonthData:[],
      lastMonthData:[],
      monthList:[],
      monthSaleOrderData:[],
      monthSaleOrderAmount:0,
      inc2MonthSaleOrderAmount:0,
      incMonthSaleOrderAmount:0,
      incMonthSaleOrderAmountRatio:0
    }
  },
  mounted () {
    this.$emit('setHeight', this.$refs.portaletDiv.offsetHeight)
    getIndexData().then(res=>{
      this.saleAmount=res.data.todaySaleOrderData.saleAmount;
      this.saleCount=res.data.todaySaleOrderData.saleCount;
      this.productCount=res.data.todayProductData.productCount;
      this.completeCount=res.data.todayCompleteData.completeCount;
      this.dispatchCount=res.data.todayDispatchData.dispatchCount;
      this.installerCount=res.data.todayInstallerData.installerCount;
      this.measureCount=res.data.todayMeasureData.measureCount;
      if(res.data.todayIncomeData) {
        this.incomeAmount=res.data.todayIncomeData.incomeAmount;
      }
      this.monthDays=res.data.thisMonthDays;
      this.thisMonthData=res.data.thisMonthOrderAmountData;
      this.lastMonthData=res.data.lastMonthOrderAmountData;
      this.monthList=res.data.monthList;
      this.monthSaleOrderData=res.data.monthSaleOrderData;
      this.monthSaleOrderAmount=res.data.monthSaleOrderAmount;
      this.inc2MonthSaleOrderAmount=res.data.inc2MonthSaleOrderAmount;
      this.incMonthSaleOrderAmount=res.data.incMonthSaleOrderAmount;
      this.incMonthSaleOrderAmountRatio=res.data.incMonthSaleOrderAmountRatio;
    })
  },
  filters: {},
  computed: {},
  watch: {},
  methods: {}
}
</script>
<style scoped lang="less">
.top_card {
  padding:16px;
}
.dasboard_body{
 .ant-card-body{
   padding: 0;
 }
}
.big_icon {
  font-size: 40px;
  position: absolute;
  top: 16px;
  right: 16px;
  color: #eaf0f7;
  z-index: 0;
}

.ant-tag-has-color {
  border-radius: 16px;
  padding: 4px 16px;
  border: 0;
  margin-left: 8px;
  font-size: 16px;
  vertical-align: top;
  font-size: 14px;
  margin-top: -2px;
  .anticon {
    margin-right: 4px;
  }
}
.red_tag {
  background: linear-gradient(45deg, #f8371c, #df3018);
}
.green_tag {
  background: linear-gradient(45deg, #50c51c, #49b21b);
}
.ant-progress-bg {
  height: 12px !important;
}
.chart_card {
  padding: 16px;
  .ant-card-head {
    padding: 0;
  }
}
.smBanner {
  background: linear-gradient(135deg, #148ae4, #148be4);
  border-radius: 4px;
  color: #fff;
}
.ant-card {
  border-radius: 4px;
}
.money {
  h4 {
    margin: 8px;
    margin-bottom: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  h1 {
    font-size: 40px;
    font-weight: 400;
    color: #3794fc;
    font-family: Roboto;
    text-align: center;
    margin: 16px 0;
  }
  .tag_box {
    .green_tag {
      font-size: 18px;
      line-height: 32px;
      text-align: center;
      width: 140px;
      display: block;
      color: #fff;
      border-radius: 18px;
      margin: 16px auto;
    }
  }
  .tag_box {
    .red_tag {
      font-size: 18px;
      line-height: 32px;
      text-align: center;
      width: 140px;
      display: block;
      color: #fff;
      border-radius: 18px;
      margin: 16px auto;
    }
  }
  .money_card {
    margin: 16px 0;
    width: 50%;
    display: inline-block;
    border-right: 1px solid #dee5ef;

    p {
      font-size: 14px;
      padding: 10px;
      text-align: center;
      margin: 0;
      color: #97a4ba;
    }
    span {
      display: block;
      color: #67758d;
      font-size: 24px;
      line-height: 54px;
      text-align: center;
    }
  }
}
.smBanner {
  padding-left: 140px;
  .smBanner_left {
    width: 100px;
    position: absolute;
    left: 16px;
    top: 16px;
  }
  .smBanner_right {
    display: block;
    position: absolute;
    left: 100px;
    top: 0;
    bottom: 0;
    right: 4px;
  }
}
.pie_center{
  width: 140px;
  height: 140px;
  border-radius:50%;
  box-shadow:  0 0 10px rgba(40, 57, 123, .2);
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -70px ;
  margin-top: -70px ;
}
</style>
